<template>
  <div class="page indexPage">
    <div class="page-waprrer" style="overflow: hidden">
      <Scroll :data="recommandations">
        <div>

          <Swiper style="" :duration="500" :auto="true" :loop="true" dots-position="center" :show-desc-mask="false"
                  class="index-topSwiper" height="2.6rem" :list="swiperList"></Swiper>

          <div class="index-topInfor">

            <div class="topInfor">

              <div class="topInfor-title">
                <h3>THE NEW RECOMMENDATIONS</h3>
                <p>
                  销售推荐
                </p>
              </div>

              <div class="topInfor-note">
                <a href="javascript:" @click="OpenDrawer">
                  MORE >
                </a>
              </div>

            </div>

          </div>

          <div class="index-topInforList">

            <div class="topInforList">

              <template v-for="item in recommandations">

                <goodsItem  :type="goodsType" :href="'/goods/' + item.id" :img="item.imgpath"
                            :title="item.name" :note="item.sellerpoints" :price="item.shop_price"></goodsItem>

              </template>

            </div>

          </div>

        </div>
      </Scroll>
    </div>
  </div>
</template>
<script>
  import {mapGetters, mapMutations} from "vuex";
  import {getBanner, getRecommandations} from "api/index";
  import {Swiper} from 'vux';
  import goodsItem from "../base/goodsItem/goodsItem";
  import Scroll from "base/scroll/scroll";
  import Bus from "common/js/bus";
  export default {
    props: {},
    data() {
      return {
        swiperList: [],
        recommandations: [],
        goodsType: 1
      }
    },
    methods: {
      async _getBanner() {
        let Data = await getBanner();
        this.swiperList = Data.map((item)=>{
//          item.img = window.GlobalData.pageData.url +  item.img;
          return item
        });
      },
      OpenDrawer() {
        this.setDrawerState(true)
      },
      ...mapMutations({
        "setDrawerState": "SET_DRAWER_STATE",
        "setGoodsIndex": "SET_GOODS_INDEX",
        "setCommonHeader": "SET_COMMON_HEADER"
      }),
      async _getRecommandations() {
        let { data, current_page, per_page } = await getRecommandations({
          "good_cate":1,
          "Uid":1,
          "is_recommend":1
        });
        this.recommandations = data;
      }
    },
    components: {Swiper, goodsItem, Scroll},
    beforeCreate: function () {

    },
    created: function () {
      this._getBanner();
      this._getRecommandations();
    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
          vm.setCommonHeader(1);
          vm.setGoodsIndex(-1);
      })
    },
    computed: {
      ...mapGetters(['drawer_state'])
    },
    activated() {

    }
  }
</script>

<style lang="less">
  @import "../common/style/helpers/mixins";

  .index-topSwiper {
    padding-top: 50px;
  }

  .index-topInfor {
    height: 0.8rem;
    margin: 0.15rem 0;
    position: relative;

    &:after {
      height: 0.55rem;
      width: 1px;
      background: #666;
      position: absolute;
      left: 0;
      content: " ";
      top: 0.125rem;
    }
    .topInfor {
      display: flex;
      justify-content: center;
      &-title {
        height: 0.8rem;
        width: 70%;

        h3 {
          font-size: 0.30rem;
          color: #000;
          letter-spacing: 0.01rem;
          .omit();
        }
        p {
          font-size: 0.24rem;
          line-height: 0.4rem;
          color: #999;
          .omit();
        }
      }
      &-note {
        height: 0.8rem;
        width: 25%;
        text-align: right;
        line-height: 0.8rem;
        color: #666;
      }
    }
  }

  .index-topInforList {
    width: 100%;
    .topInforList {
      display: flex;
      flex-wrap: wrap;
    }
  }
</style>
